<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>computed</title>
  <!-- <script type="text/javascript" src="https://unpkg.com/vue@3.0.0-beta.17/dist/vue.global.js"></script>
	<style> -->

  <script src="vue.beta.js"></script>
  </style>
</head>

<body>
  <div id="app">
    <input v-model="firstName" type="text">
    <input v-model="lastName" type="text">
    <!-- <div>{{getFullName()}}</div> -->
    <div>{{fullName}}</div>
  </div>
</body>
<script>
  const {
    createApp,
    ref,
    reactive,
    watch,
    computed
  } = Vue
 
  // const name = reactive({
  //   firstName: "",
  //   lastName: "",
  //   fullName: ""
  // })
  const firstName = ref('1');
  const lastName = ref('2');
  // let fullName = ref("1")
  const app = {
    setup() { //他是一个函数，函数的入口。组合很多的组件
      // const fullName = computed(() => firstName.value+ "****" + lastName.value)

      const fullName = computed({
        get: ()=> firstName.value + lastName.value,
        set: (val) => {
          firstName.value = val
        } 
      })

      fullName.value = 7

      // 特点
      // 计算出来的结果
      // fullName.value //是只读的 不能修改
      // function getFullName() {
      //   return firstName.value + lastName.value
      // }

      // watch 看中的时候某个变量的变化
      // computed 看中的是计算的结果 computed 有计算缓存，普通函数没有计算的缓存
      // 计算缓存 ：如果计算里面的变量没有变化的话，直接拿计算的结果，改变了才计算一遍
      return {
        firstName,
        lastName,
        fullName,
        // getFullName
        // name
      }
    }
  }

  createApp(app).mount("#app")


  
</script>

</html>